<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>电商网站，欢迎注册</title>
	<link rel="icon" href="./img/favicon.ico">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<link rel="stylesheet" type="text/css" href="/css/all.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-login.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-register.css/">
	<div th:include="common/head :: head"></div>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

		<div th:include="common/header :: header"></div>
		<div id="app" class="container" >


			<el-steps :active="this.active" finish-status="success" simple style="margin-top: 20px">
				<el-step title="步骤 1" ></el-step>
				<el-step title="步骤 2" ></el-step>
				<el-step title="步骤 3" ></el-step>
			</el-steps>
			<h1  style="color: #1ba157;text-align: center" >用户注册</h1>
			<div>
				<div style="width: 50%;margin:0 auto ">
					<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

						<el-form-item label="用户登录账号" prop="loginName" >
							<el-input type="text" v-model="ruleForm.loginName" autocomplete="off" ></el-input>
						</el-form-item>
						<el-form-item label="用户昵称" prop="nickName" >
							<el-input type="text" v-model="ruleForm.nickName" autocomplete="off" ></el-input>
						</el-form-item>
						<el-form-item label="用户姓名" prop="name">
							<el-input type="text" v-model="ruleForm.name"     autocomplete="off" ></el-input>
						</el-form-item>
						<el-form-item label="手机号" prop="phoneNum">
							<el-input type="text" v-model="ruleForm.phoneNum"  autocomplete="off" ></el-input>
						</el-form-item>
						<el-form-item label="邮箱"prop="email" >
							<el-input type="text" v-model="ruleForm.email"     autocomplete="off" ></el-input>
						</el-form-item>
						<el-form-item  v-show="this.show==2" label="获取验证码" >
							<el-tag type="success" @click="mySendmail()"  >点击获取验证码</el-tag>
						</el-form-item>
						<el-form-item label="验证码"  prop="code" >
							<el-input type="text" v-model="ruleForm.code"
									  autocomplete="off"
									  :rows="5"
									  maxlength="6"
									  show-word-limit
									  style="width: 50%" >
							</el-input>
							<el-tag type="success" v-if="!show1" >{{ times }}</el-tag>
						</el-form-item>

						<el-form-item label="密码" prop="password" >
							<el-input type="password" v-model="ruleForm.password" autocomplete="off" ></el-input>
						</el-form-item>

						<el-form-item label="确认密码" prop="checkpassword">
							<el-input type="password" v-model="ruleForm.checkpassword" autocomplete="off"  ></el-input>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
							<el-button @click="longin()">去登陆</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>

		</div>

		<!--foot-->
		<div class="py-container copyright">
			<ul>
				<li><a href="javascript:void(0)"  onclick="alert('暂未开放');">关于我们</a></li>
				<li>联系我们</li>
				<li>联系客服</li>
				<li>商家入驻</li>
				<li>营销中心</li>
				<li><a href="javascript:void(0)" onclick="alert('暂未开放');">手机端下载</a></li>
				<li>销售联盟</li>
				<li><a href="javascript:void(0)" onclick="alert('暂未开放');">电商网站社区</a></li>
			</ul>
			<div class="address">地址：四川省成都市龙泉驿区</div>
			<div class="beian">蜀ICP备2021014819号-1
			</div>
		</div>

</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	new Vue({
		el: '#app',
		data: function() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkpassword');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('用户登录账号不为空'));
				} else {
					callback();
				}
			};
			var validatePass4 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('用户昵称不为空'));
				} else {
					callback();
				}
			};
			var validatePass5 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('用户姓名不为空'));
				} else {
					callback();
				}
			};
			var validatePass6 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('手机号不为空'));
				} else {
					callback();
				}
			};
			var validatePass7 = (rule, value, callback) => {
				if (value === '') {
					this.show=1
					callback(new Error('邮箱不为空'));
				}
				var verify = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (!verify.test(this.ruleForm.email)) {
					console.log(this.ruleForm.email)
					this.show=1
					callback(new Error('邮箱格式错误, 请重新输入'));
				}
				else {
					this.show=2
					this.next();
					callback();
				}
			};
			var validatePass8 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('验证码不为空'));
				}else {
					console.log(this.ruleForm.email)
					const vm = this;
					axios.post('/user/verificationCode', {
						mail: vm.ruleForm.email,
						code: vm.ruleForm.code
					})
					.then(function (response) {
						if (response.data.code == 200) {
							if(response.data.data==2){
								console.log("验证通过")
								vm.$message('验证通过');
							}else{
								console.log("验证码填写错误")
								vm.$message('验证码填写错误');
								callback(new Error('验证码填写错误'))
							}
						} else {
							callback(new Error('验证码填写错误'))
						}
					})
					.catch(function (error) {
						callback(new Error('验证码填写错误'))
					});

					callback();
				}
			};
			return {
				ruleForm: {
					password: '',
					checkpassword: '',
					loginName:'',
					nickName:'',
					name:'',
					phoneNum:'',
					email:'',
					code:''
				},
				active: 1,
				show:1,
				times: 120,
				show1:true,
				rules: {
					code: [
						{ validator: validatePass8, trigger: 'blur' }
					],
					email: [
						{ validator: validatePass7, trigger: 'blur' }
					],
					phoneNum: [
						{ validator: validatePass6, trigger: 'blur' }
					],
					name: [
						{ validator: validatePass5, trigger: 'blur' }
					],
					nickName: [
						{ validator: validatePass4, trigger: 'blur' }
					],
					loginName: [
						{ validator: validatePass3, trigger: 'blur' }
					],
					password: [
						{ validator: validatePass, trigger: 'blur' }
					],
					checkpassword: [
						{ validator: validatePass2, trigger: 'blur' }
					]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						const vm = this;
						axios.post('/user/register',
							 vm.ruleForm
						)
						.then(function (response) {
							if (response.data.code == 200) {
								vm.$message({
									message: '注册成功，请登录！',
									type: 'success'
								});
								window.location.href = 'http://passport.gmall.com/login.html?originalUrl=http://passport.gmall.com'
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			open1() {
				this.$notify({
					title: '成功',
					message: '验证码获取成功，注意查收',
					type: 'success'
				});
			},
			open4() {
				this.$notify.error({
					title: '错误',
					message: '验证码获取失败，请重试'
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getCode() {
				this.show1 = false
				this.timer = setInterval(()=>{
					this.times--
					if(this.times===0){
						this.show1 = true
						clearInterval(this.timer)
					}
				},1000)
			},
			longin(){
				window.location.href = 'http://passport.gmall.com/login.html?originalUrl=http://passport.gmall.com'
			},
			next() {
				if (this.active++ > 2) this.active = 0;
				console.log("active",this.active)
			},
			mySendmail(){
				console.log(this.ruleForm.email)
				const vm = this;
				// 上面的请求也可以这样做
				axios.get('user/mailSend', {
					params: {
						email: this.ruleForm.email
					}
				})
				.then(function (response) {
					if (response.data.code == 200) {
						vm.open1();
						vm.show=1;
						vm.getCode()
					} else {
						vm.open4();
					}
				})
				.catch(function (error) {
					console.log(error);
				})
			}

		}
	})
</script>
</html>